<template>
  <div class="user_echarts">
    <div class=" mt-4" id="user_chart" ref="user_chart" style="width: 1200px; height: 600px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {getUserCnt} from '@/api/User'


export default {
  name: "user_cnt",
  data(){
     return{
       stu:0,
       tea:0,
       senior:0,
       stu_cnt_ok:0,
       tea_cnt_ok:0,
       senior_cnt_ok:0,
       stu_nook:0,
       tea_nook:0,
       senior_nook:0,


     }
  },
  methods:{
    //显示用户数量的图表
    getUserCntChart(){

      getUserCnt({}).then(res=>{
        //待审核
        this.stu=res.data.stu;
        this.tea=res.data.tea;
        this.senior=res.data.senior;
        //审核通过
        this.stu_cnt_ok=res.data.stu_cnt_ok;
        this.tea_cnt_ok=res.data.tea_cnt_ok;
        this.senior_cnt_ok=res.data.senior_cnt_ok;
        //审核不通过
        this.stu_nook=res.data.stu_nook;
        this.tea_nook=res.data.tea_nook;
        this.senior_nook=res.data.senior_nook;

        let option ={
          // 图例
          legend: {
            data: ["待审核数", "审核通过数","审核不通过数"],
            top: "0%", // 设置图例位置在顶部
            right: -5,  //调整图例位置
          },

          title: {
            text: '嘉庚考研圈用户数量',
            textStyle: { // 标题的样式
              fontSize: '22px', // 字体大小
              textAlign:'center',
            },

          },
          tooltip: {},
          xAxis: {
            name:'身份',
            data: ['学生','老师','学长学姐']
          },
          yAxis: {
            name:'人数',
            type:'value',
            axisLine:{
              show:false
            }
          },
          series:[
            {
              name: '待审核数',
              emphasis: {//折线图的高亮状态。
                focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
              },
              type: 'bar', // 类型为柱状图
              stack:"Search Engine",
              data: [this.stu,this.tea,this.senior],
              barWidth: '20%', // 柱条宽度 每个柱条的宽度就是类目宽度的 20%
              // 柱子的样式
              itemStyle: {
                color: '#5574c2'
              },
            },
            {
              name: '审核通过数',
              type: 'bar', // 类型为柱状图
              stack:"Search Engine",
              emphasis: {//折线图的高亮状态。
                focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
              },
              data: [this.stu_cnt_ok,this.tea_cnt_ok,this.senior_cnt_ok],
              barWidth: '20%', // 柱条宽度 每个柱条的宽度就是类目宽度的 20%
              // 柱子的样式
              itemStyle: {
                color: '#cc99cc'
              },
            },
            {
              name: '审核不通过数',
              type: 'bar', // 类型为柱状图
              stack:"Search Engine",
              emphasis: {//折线图的高亮状态。
                focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
              },
              data: [this.stu_nook,this.tea_nook,this.senior_nook],
              barWidth: '20%', // 柱条宽度 每个柱条的宽度就是类目宽度的 20%
              // 柱子的样式
              itemStyle: {
                color: '#80C68D'
              },
            },

          ]
        };
        setTimeout(function (){
          let user_chart = echarts.init(document.getElementById("user_chart"));
          user_chart.setOption(option);
        },1000)


      });


    },
  },
  mounted() {


  },
  created() {
    let _this=this;
    _this.getUserCntChart();
  }
}
</script>

<style scoped>
.user_echarts{
  border-color: black;
  border-width: 4px;
  border-radius: 5px;
}
</style>
